<template>
  <div id="chartProduce" class="main_container"></div>
</template>

<script>
import moment from "moment";
import { statDayReportDetail } from "@/api/produce/ProduceDayReportDetailApi";
import objectUtil from "@/utils/objectUtil";      

export default {
  name: "reportchart",
  components: {},
  data() {
    return {
      list: null,
      listLoading: true,
      queryConditions: {
        produceLineId: "",
        schedulePeriod: "",
        schedulePeriodType: 1,
        orderNo: "",
        produceNo: ""
      },
      dayChart: {} //echart
    };
  },
  props: {
    input: {}
  },
  watch: {
    input: function(newValue, oldValue) {
      if (
        newValue != null &&
        objectUtil.isObjectChangedSimple(newValue, oldValue)
      ) {
        this.queryConditions = { ...newValue };
        if (
          this.queryConditions.schedulePeriod != null &&
          this.queryConditions.schedulePeriodType > 0 &&
          this.queryConditions.orderNo != null &&
          this.queryConditions.orderNo.length > 0 &&
          this.queryConditions.productNo != null &&
          this.queryConditions.productNo.length > 0
        )
          this.statDayReportDetail();
      }
    },
    $route: "resizeChart",
    deep: true
  },
  computed: {},
  created() {},
  mounted() {
    //echart
    this.initCharts();
  },
  methods: {
    initCharts() {
      this.dayChart = this.$echarts.init(
        document.getElementById("chartProduce")
      );
      this.setOptions();
    },
    setOptions() {
      if (this.list != null) {
        let xAxis = this.list.map(v => {
          return v.reportDate;
        });
        let xAxisData = this.list.map(v => {
          return v.total;
        });
        debugger;
        this.dayChart.setOption({
          title: {
            text: "日产能数量"
          },
          tooltip: {},
          xAxis: {
            // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            data: xAxis
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              //data: [5, 20, 36, 10, 10, 20],
              data: xAxisData
            }
          ]
        });
      }
    },
    statDayReportDetail() {
      let param = { dayReportDetailConditionDto: this.queryConditions };
      statDayReportDetail(this.queryConditions).then(response => {
        debugger;
        this.list = response.data;
        this.setOptions();
      });
    },
    resizeChart() {
      let p = this.$route.path.split("/");
      if (p != null && p.length > 0) {
        let num = parseInt(p[p.length - 1]);
        if (num != null && num == 1) {
          this.dayChart.resize();
        }
      }
    }
  }
};
</script>
<style scoped>
.wrapperSon {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.main_container {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
</style>
